<template>
  <div class="app-container">
    <!--工具条-->
    <el-form ref="form" inline label-width="160px">
      <!--级联选择器-->
      <el-form-item label="选择课程和年级">
        <el-cascader
          v-model="value"
          clearable
          style="width: 280px"
          size="mini"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item class="right-float">
        <el-button
          v-if="scoreData.length > 0"
          type="success"
          size="mini"
          @click="randomScore"
        >
          随机生成分数
        </el-button>
      </el-form-item>
      <el-form-item class="right-float">
        <el-button
          v-if="scoreData.length > 0"
          :type="isSave ? 'success' : 'danger'"
          size="mini"
          @click="saveScore"
        >
          保存成绩
        </el-button>
      </el-form-item>
    </el-form>
    <!--数据列表-->
    <el-table
      :data="scoreData"
      stripe
      :max-height="screenHeight"
      border
      style="width: 100%"
    >
      <el-table-column fixed label="序号" width="60">
        <template v-slot="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed label="学生姓名" width="80">
        <template v-slot="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="平时成绩">
        <template v-slot="scope">
          <!--显示和输入成绩-->
          <el-input
            v-model.number="scope.row.daily_score"
            :min="0"
            :max="100"
            size="mini"
          />
        </template>
      </el-table-column>
      <el-table-column label="作业成绩">
        <template v-slot="scope">
          <!--显示和输入成绩-->
          <el-input
            v-model.number="scope.row.work_score"
            :min="0"
            :max="100"
            size="mini"
          />
        </template>
      </el-table-column>
      <el-table-column label="期中考试成绩">
        <template v-slot="scope">
          <!--显示和输入成绩-->
          <el-input
            v-model.number="scope.row.mid_score"
            :min="0"
            :max="100"
            size="mini"
          />
        </template>
      </el-table-column>
      <el-table-column label="期末考试成绩">
        <template v-slot="scope">
          <!--显示和输入成绩-->
          <el-input
            v-model.number="scope.row.final_score"
            :min="0"
            :max="100"
            size="mini"
          />
        </template>
      </el-table-column>
      <el-table-column label="平均分">
        <template v-slot="scope">
          <span v-text="average(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as courseApi from "@/api/course";
import { mapState } from "vuex";

export default {
  name: "AddCourse",
  data() {
    return {
      // 考试数据
      scoreData: [],
      // 考试批次列表
      examBatchList: [],
      // 选择的考试批次id
      examBatchId: null,
      // 级联选择器值
      value: [],
      // 成绩是否已经保存
      isSave: true,
      // 屏幕高度
      screenHeight: 0,
    };
  },
  computed: {
    ...mapState("classL", ["classList"]),
    // 级联选择器数据
    options() {
      const options = [];
      // 如果考试记录不为空
      if (this.examBatchList.length > 0) {
        this.examBatchList.forEach((item) => {
          const option = {
            value: item.id,
            label: item.title,
            children: [],
          };
          this.classList.forEach((item) => {
            option.children.push({
              value: item.id,
              label: item.name,
            });
          });
          options.push(option);
        });
      }
      return options;
    },
    // 计算平均分
    average() {
      // eslint-disable-next-line space-before-function-paren
      return function (row) {
        let total = 0;
        const courseList = [
          "daily_score",
          "work_score",
          "mid_score",
          "final_score",
        ];
        // 计算学科总分
        for (const courseItem in courseList) {
          total += row[courseList[courseItem]] || 0;
        }
        const average = (total / courseList.length).toFixed(1);
        row.average = average;
        return average;
      };
    },
  },
  // 监视属性 当学生成绩被修改而且成绩没有保存时，isSave为false
  watch: {
    scoreData: {
      handler() {
        this.isSave = false;
      },
      deep: true,
    },
  },
  beforeMount() {
    this.$store.dispatch("classL/getClassList");
    // 获取考试批次列表
    this.getExamBatchList();
    // 获取屏幕高度的78%
    this.screenHeight = Math.floor(
      document.documentElement.clientHeight * 0.78
    );
  },
  methods: {
    // 获取考试批次列表
    async getExamBatchList() {
      const res = await courseApi.getExamBatch();
      if (res.code === 20000) {
        this.examBatchList = res.data || [];
      }
    },
    // 获取成绩数据
    getScoreData() {
      // 整理考试批次和班级id
      const params = {
        testId: this.value[0],
        classId: this.value[1],
        type: 1,
      };
      // 获取成绩数据
      courseApi.getScoreData(params).then((res) => {
        this.scoreData = res.data || [];
      });
    },
    // 级联选择器值改变时触发
    handleChange(value) {
      this.value = value;
      this.getScoreData();
    },
    // 保存成绩
    saveScore() {
      this.isSave = true;
      // 整理成绩数据
      const scoreData = [];
      this.scoreData.forEach((item) => {
        const scoreItem = {
          student_id: item.student_id,
          daily_score: item.daily_score || null,
          work_score: item.work_score || null,
          mid_score: item.mid_score || null,
          final_score: item.final_score || null,
          average: item.average,
          test_id: item.test_id,
        };
        scoreData.push(scoreItem);
      });
      // 发送请求
      courseApi.saveScoreData(scoreData).then((res) => {
        if (res.code === 20000) {
          this.$message.success("保存成功！");
        }
      });
    },
    // 随机生成成绩
    randomScore() {
      // 随机添加分数
      this.scoreData.forEach((item) => {
        item.daily_score = Math.floor(Math.random() * 101);
        item.work_score = Math.floor(Math.random() * 101);
        item.mid_score = Math.floor(Math.random() * 101);
        item.final_score = Math.floor(Math.random() * 101);
      });
    },
  },
  // 组件内路由守卫
  // 当成绩未保存时 当离开页面时 提示用户
  beforeRouteLeave(to, from, next) {
    if (this.isSave === false) {
      this.$confirm("成绩未保存，是否离开？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          next();
        })
        .catch(() => {
          next(false);
        });
    } else {
      next();
    }
  },
};
</script>

<style scoped>
/*
  el-table样式穿透 表格居中
*/
div/deep/ .el-table th > .cell {
  text-align: center;
}

div/deep/ .el-table .cell {
  text-align: center;
}

.right-float {
  float: right;
}
</style>
